<template>
  <view class="select">
    <u-gap height="30rpx" bgColor="#eee"></u-gap>
    <view class="guess">
      <view class="title">已选类型：{{ textyp }}</view>
      <view class="title">投诉对象</view>
      <!-- 		<image @click="ishow = !ishow" class="imge" src="../../static/server_mag/chorder.png" mode="widthFix"
				style="width: 90%;margin: 20rpx 30rpx 8rpx;">
			</image> -->
      <view class="goods">
        <view
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <view class="gd-lt">
            <image
              src="../../static/server_mag/store-icon.png"
              mode="widthFix"
              style="width: 36rpx; margin-right: 20rpx"
            ></image>
            <text class="alltxt" style="font-size: 32rpx"
              >晟牛科技晟牛科技晟牛科技晟牛科技晟牛科技</text
            >
          </view>
          <view class="gd-rt" @click="ishow = !ishow">
            <text style="font-size: 32rpx; margin-right: 20rpx; color: #157afe"
              >重新选择</text
            >
            <image
              src="../../static/server_mag/path-ble.png"
              mode="widthFix"
              style="width: 13rpx"
            ></image>
          </view>
        </view>
        <view class="deatl">
          <view class="sptp">
            <image
              class="sp-img"
              src="../../static/server_mag/iphone13_pro.png"
              mode="aspectFit"
            ></image>
          </view>
          <view class="items">
            <text class="alltxt">苹果13Promax 5G手机 全新机器，正品！</text>
            <text class="alltxt" style="color: #9d9d99; font-size: 28rpx"
              >租完即送</text
            >
            <view style="display: flex; align-items: center">
              <text
                class="alltxt"
                style="color: #9d9d99; font-size: 26rpx; width: 90%"
                >订单号：202207856322333</text
              >
              <text style="color: #9d9d99; font-size: 32rpx; margin-left: 10rpx"
                >x1</text
              >
            </view>
          </view>
        </view>
        <view style="font-size: 30rpx; margin: 20rpx 0 0 20rpx; :#9D9D99 "
          ><span style="color: #9d9d99">租期：</span>2022/07/13-2022/07/20</view
        >
      </view>
    </view>
    <u-gap height="30rpx" bgColor="#eee"></u-gap>
    <view class="guess">
      <view style="margin: 0rpx 30rpx; padding: 16rpx 0 26rpx">
        <view style="margin-top: 10rpx; font-size: 32rpx">投诉说明</view>
        <u-form :model="form" ref="uForm" labelPosition="top" labelWidth="120">
          <u-form-item prop="intro">
            <u-textarea
              placeholder="请描述你具体遇到的问题~"
              v-model="form.intro"
              maxlength="500"
              height="100"
            >
            </u-textarea>
          </u-form-item>
        </u-form>
      </view>
      <view style="margin: 0 30rpx 30rpx">
        <view style="padding-bottom: 26rpx; font-size: 32rpx">投诉说明</view>
        <!-- 		<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="5"
					uploadIcon="plus"></u-upload> -->
      </view>
    </view>
    <u-gap height="12vh" bgColor="#eee"></u-gap>
    <view
      style="
        background-color: #eee;
        position: fixed;
        bottom: 0rpx;
        width: 100vw;
        height: 12vh;
      "
    >
      <u-button
        customStyle="background: #157AFE;color: #fff; border-radius: 40rpx;width: 90vw;height:90rpx;left:35rpx;right: 35rpx;"
        text="确认提交"
        @click="submit"
      >
      </u-button>
    </view>

    <u-popup
      class="tup"
      :show="ishow"
      :round="10"
      :safeAreaInsetTop="true"
      :closeable="popupData.closeable"
      :closeOnClickOverlay="popupData.closeOnClickOverlay"
      @close="close"
    >
      <view style="height: 60vh; overflow: auto">
        <u-sticky>
          <text
            style="
              display: flex;
              justify-content: center;
              font-size: 32rpx;
              background-color: #fff;
            "
            >请选择相关订单</text
          >
        </u-sticky>
        <view
          v-for="(item, index) in some"
          :key="index"
          @click="visitfun(item, index)"
        >
          <view
            class="goods"
            :class="{
              visited: isvisited == index,
              bott: some.length - index == 1,
            }"
            style="position: relative; padding-left: 76rpx"
          >
            <!-- <image src="../../static/server_mag/secle.png" mode="aspectFit" style="width: 40rpx;height:40rpx;position: absolute;top:44%;left: 19rpx;"></image> -->
            <image
              :src="isvisited == index ? starBlueUrl : starUrl"
              mode="aspectFit"
              style="
                width: 40rpx;
                height: 40rpx;
                position: absolute;
                top: 44%;
                left: 19rpx;
              "
            ></image>
            <view class="gd-lt" style="width: 88%">
              <image
                src="../../static/server_mag/store-icon.png"
                mode="widthFix"
                style="width: 36rpx; margin-right: 20rpx"
              ></image>
              <text class="alltxt" style="font-size: 30rpx">{{
                item.store
              }}</text>
            </view>
            <view class="deatl">
              <view class="sptp">
                <image
                  class="sp-img"
                  src="../../static/server_mag/iphone13_pro.png"
                  mode="aspectFit"
                ></image>
              </view>
              <view class="items">
                <text class="alltxt" style="font-size: 30rpx">{{
                  item.text
                }}</text>
                <text class="alltxt" style="color: #9d9d99; font-size: 28rpx"
                  >租完即送</text
                >
                <view style="display: flex; align-items: center">
                  <text
                    class="alltxt"
                    style="color: #9d9d99; font-size: 26rpx; width: 90%"
                    >订单号：{{ item.order }}</text
                  >
                  <text
                    style="color: #9d9d99; font-size: 32rpx; margin-left: 10rpx"
                    >x{{ item.num }}</text
                  >
                </view>
              </view>
            </view>
            <view style="font-size: 30rpx; margin: 20rpx 0 0 20rpx; :#9D9D99 "
              ><span style="color: #9d9d99">租期：</span>{{ item.day }}</view
            >
          </view>
        </view>
        <u-gap height="1vh" bgColor="#eee"></u-gap>
        <view
          style="
            background-color: #fff;
            position: fixed;
            bottom: 0rpx;
            width: 100vw;
            height: 10vh;
          "
        >
          <u-button
            text="确认"
            customStyle="background: #157AFE;color: #fff;
						border-radius: 40rpx;width: 90vw;height:90rpx;left:35rpx;right: 35rpx;"
            @click="ishow = !ishow"
          ></u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      some: [
        {
          text: "苹果13Promax 5G手机 全新机器，正品！",
          type: "1",
          order: "202207856322333",
          num: "1",
          day: "2022/07/13-2022/07/20",
          store: "晟牛科技晟牛科技晟牛科技晟牛科技晟牛科技",
        },
        {
          text: "苹果13Promax 5G手机 全新机器，正品！",
          type: "2",
          num: "9",
          order: "202207856322333",
          day: "2022/07/13-2022/07/20",
          store: "晟牛科技晟牛科技晟牛科技晟牛科技晟牛科技",
        },
        {
          text: "苹果13Promax 5G手机 全新机器，正品！",
          type: "3",
          num: "8",
          order: "202207856322333",
          day: "2022/07/13-2022/07/20",
          store: "晟牛科技晟牛科技晟牛科技晟牛科技晟牛科技",
        },
      ],
      isvisited: -1,
      fileList1: [],
      textyp: "",
      form: {
        intro: "",
      },
      rules: {
        intro: [
          {
            required: true,
            message: "请输入描述内容！",
            trigger: "blur",
          },
        ],
      },
      ishow: false,
      popupData: {
        closeable: true,
        closeOnClickOverlay: true,
      },
      starUrl: "",
      starBlueUrl: "",
    };
  },
  created() {
    this.starUrl = require("../../static/server_mag/secle.png");
    this.starBlueUrl = require("../../static/server_mag/secled.png");
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  onShow() {},
  mounted() {},
  onLoad(e) {
    console.log("e", e);
    this.textyp = e.text;
  },
  methods: {
    visitfun(item, index) {
      // console.log('1',item);
      // console.log('2',index);
      this.isvisited = index;
    },
    close() {
      this.ishow = false;
    },
    submit() {
      this.$refs.uForm
        .validate()
        .then((res) => {
          uni.showToast({
            title: "提交成功",
            icon: "success",
          });
        })
        .catch((errors) => {
          uni.showToast({
            title: "提交失败",
            icon: "fail",
          });
        });
    },
    // 删除图片
    deletePic(event) {
      console.log(event);
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          formData: {
            user: "test",
          },
          success: (res) => {
            setTimeout(() => {
              resolve(res.data.data);
            }, 1000);
          },
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.bott {
  margin-bottom: 10vh !important;
}
.visited {
  border: 1px solid #157afe !important;
}
.goods {
  margin: 26rpx 32rpx;
  padding: 20rpx;
  border-radius: 16rpx;
  box-sizing: border-box;
  border: 1px solid #e4e4e4;
  box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.02);
  .gd-lt {
    width: 60%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .alltxt {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .deatl {
    margin-top: 20rpx;
    display: flex;

    .sptp {
      width: 150rpx;
      height: 150rpx;
      background: #f0f0f0;
      border-radius: 20rpx;

      .sp-img {
        width: 100%;
        height: 100%;
      }
    }

    .items {
      flex: 1;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      margin-left: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
  }
}
.select {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;

  .guess {
    background-color: #fff;
    margin: 0rpx 32rpx;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding-bottom: 10rpx;

    .title {
      font-size: 32rpx;
      font-weight: 500;
      padding: 30rpx 32rpx 0;
    }

    .goods {
      margin: 26rpx 32rpx;
      padding: 20rpx;
      border-radius: 16rpx;
      box-sizing: border-box;
      border: 1px solid #e4e4e4;
      box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.02);

      .gd-lt {
        width: 60%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      .alltxt {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }

      .deatl {
        margin-top: 20rpx;
        display: flex;

        .sptp {
          width: 160rpx;
          height: 160rpx;
          background: #f0f0f0;
          border-radius: 20rpx;

          .sp-img {
            width: 100%;
            height: 100%;
          }
        }

        .items {
          flex: 1;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          margin-left: 20rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
        }
      }
    }
  }
}
</style>
